<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <h3>商品价格<input id="goodsprice" /></h3>
        <h3>商品数量<input id="goodsnum" /></h3>
        <h3>小计<span id="total"></span></h3>
    </div>
</body>
<script>
    let goodspriceInput = document.getElementById("goodsprice");
    let goodsnumInput = document.getElementById("goodsnum");
    let goodsinfo = {
        totalSpan: document.getElementById("total")
    };//对象

    // 声明一下
    let _goodsnum = 0;
    let _goodsprice = 0;

    Object.defineProperty(goodsinfo, "goodsprice", {
        set(price) {//赋值时 触发
            _goodsprice = price;
            compiler();

        },
        get() {//取值时 触发
            return _goodsprice;
        }
    });
    function compiler() {
        goodsinfo.totalSpan.innerHTML = goodsinfo.goodsnum * goodsinfo.goodsprice;

    }

    Object.defineProperty(goodsinfo, "goodsnum", {
        set(num) {//赋值时 触发
            _goodsnum = num;
            compiler();

        },
        get() {//取值时 触发

            return _goodsnum;
           
        }
    });
    goodspriceInput.oninput = function () {
        goodsinfo.goodsprice = this.value;//对象的赋值
    }
    goodsnumInput.oninput = function () {
        goodsinfo.goodsnum = this.value;//对象的赋值

    }
    //Proxy

</script>

</html>